<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 空白页</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__STATIC__/layout/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
    <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
</head>

<body class="white-bg" style="color:#333;padding:0px;">
    <div class="page-heade">
      <h2 class="title_color text-center">James Liang的经销商管理</h2>
    </div>
        <div>
        <form action="#" class="form-inline">
             <table class="table table-bordered">
                      <tr>
                        <td style="min-width: 120px;width: 120px"><label for="">所属分区</label></td>
                        <td><input type="text" class="form-control"></td>
                        <td style="min-width: 120px;width: 120px"><label for="">所属省份</label></td>
                        <td><input type="text" class="form-control"></td>
                        <td style="min-width: 120px;width: 120px"><label for="">所属城市</label></td>
                          <td><input type="text" class="form-control"></td>
                     </tr>
                       <tr>
                        <td style="min-width: 120px;width: 120px"><label for="">经销商名称</label></td>
                        <td><input type="text" class="form-control"></td>
                        <td style="min-width: 120px;width: 120px"><label for="">经销商编号</label></td>
                        <td colspan="3"><input type="text" class="form-control"></td>
                     </tr>
                    <tr>
                      <td class="text-center" colspan="6">
                          <button class="btn-info btn query">查询</button>
                          <button class="btn-info btn emptyIf">清空查询条件</button>
                      </td>
                    </tr>
             </table>
           <table class="table table-bordered">
           <tr>
              <td class="text-center info" style="font-size: 18px">未负责经销商</div></td>
              <td></td>
              <td class="info text-center" style="font-size: 18px">已负责经销商</td>
           </tr>
           <tr><td class="col-md-5" style="height:600px; overflow:auto;">
                  <select multiple id="select1" style="height: 100%;width: 100%" class="form-control">
                        <option value="11">选项1</option>
                        <option value="22">选项2</option>
                        <option value="33">选项3</option>
                        <option value="44">选项4</option>
                        <option value="55">选项5</option>
                        <option value="66">选项6</option>
                        <option value="77">选项7</option>
                        <option value="88">选项8</option>
                         </select>
                     </td>
                     <td class="col-md-2 text-center">
                   <span style="border-radius: 6px;padding:5px 10px;cursor: pointer; border:1px solid #ccc;margin-left: 25px;" id="toRight">&gt;&gt;&gt;&gt;&gt;&gt;</span><br><br><br>
                    <span style="border-radius: 6px;padding:5px 10px;cursor: pointer; border:1px solid #ccc;margin-left: 25px;" id="toLeft">&lt;&lt;&lt;&lt;&lt;&lt;</span>
            </td>
            <td class="col-md-5"  style="height:600px; overflow:auto;">
                  <select multiple id="select2" style="height: 100%;width: 100%" class="form-control">
                        <option value="11">选项1</option>
                        <option value="22">选项2</option>
                        <option value="33">选项3</option>
                        <option value="44">选项4</option>
                        <option value="55">选项5</option>
                        <option value="66">选项6</option>
                        <option value="77">选项7</option>
                        <option value="88">选项8</option>
                         </select>
            </td>
           </tr>
            </table>
              <div class="row white-bg text-center" style="padding:15px 0">
            <button class="btn btn-warning" type="button" onclick="back()">返回</button>
        </div>
        </form>
        <div class="padding-10 margin-10 colorRed">
          <p>1.按住Ctrl单机左键可以多选</p>
          <p>2.按住左键拖动可以多选。</p>
          <p>3.只查询未负责系统。</p>
        </div>
    </div>
    <!-- 表格 -->



    <!-- 全局js -->
    <script src="__STATIC__/layout/js/jquery.min.js?v=2.1.4"></script>
    <script src="__STATIC__/layout/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> -->
    <script src="__STATIC__/layout/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>

    <!-- jqGrid -->
    <!-- <script src="../js/plugins/sweetalert/sweetalert.min.js"></script> -->
    <!-- <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script> -->
    <script>
        $(document).ready(function() {
                $('#toRight').click(function() {
                    var $options = $('#select1 option:selected'); //获取选中的元素
                    var $remove = $options.remove();
                    $remove.appendTo('#select2');
                });
                 $('#toLeft').click(function() {
                    var $options = $('#select2 option:selected'); //获取选中的元素
                    var $remove = $options.remove();
                    $remove.appendTo('#select1');
                });
            })
        function back(){
            window.history.go(-1)
        }
   </script>
</body>

</html>